<template>
  <div class="nav">
    <div class="container">
      <div class="panel panel-primary">
        <div class="panel-heading">任务计划列表</div>
        <div class="panel-body">
          <form>
            <div class="form-group">
              <label for="misson">添加任务</label>
              <input type="text" class="form-control" id="misson" />
            </div>
          </form>
          <div class="row">
            <div class="col-md-2 col-md-offset-1">2个未完成任务</div>
            <div class="col-md-2 col-md-offset-3">
              <button type="button" class="btn btn-primary">所有任务</button>
            </div>
            <div class="col-md-2">
              <button type="button" class="btn btn-danger">未完成任务</button>
            </div>
            <div class="col-md-2">
              <button type="button" class="btn btn-info">已完成任务</button>
            </div>
          </div>
          <div>
            <h3>任务列表：</h3>
            <do-list :list="list"></do-list>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//引入vuex辅助函数
import {mapActions,mapState} from 'vuex'
import DoList from '../components/DoList.vue'
export default {
  name: "Home",
  computed:{
    //将`list` 映射为`this.$store.state.list`
    ...mapState(['list'])
  },
  methods:{
    // 将 `this.getDataFromInternet()` 映射为 `this.$store.dispatch('getDataFromInternet')`
    ...mapActions(['getDataFromInternet'])
  },
  components:{
    DoList
  },
  created(){
    this.getDataFromInternet()
  }
};
</script>

<style lang='less' scoped>
</style>